<!DOCTYPE html>
<html>
<head>
    <title>V-Table</title>
    <link rel="stylesheet" type="text/css" href="../styles/font-awesome.min.css" />
    <script src="http://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>

    <style type="text/css">
        body {
          font-family: Helvetica Neue, Arial, sans-serif;
          font-size: 14px;
          color: #444;
        }

        table {
          border: 2px solid #42b983;
          border-radius: 3px;
          background-color: #fff;
        }

        th {
          background-color: #42b983;
          color: rgba(255,255,255,0.66);
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -user-select: none;
        }

        td {
          background-color: #f9f9f9;
        }

        th, td {
          min-width: 120px;
          padding: 10px 20px;
        }

        tr th:first-child, tr td:first-child {
          padding: 0;
          min-width: 50px;
          text-align: center;
        }

        th.active {
          color: #fff;
        }

        th.active .arrow {
          opacity: 1;
        }

        .arrow {
          display: inline-block;
          vertical-align: middle;
          width: 0;
          height: 0;
          margin-left: 5px;
          opacity: 0.66;
        }

        .arrow.asc {
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-bottom: 4px solid #fff;
        }

        .arrow.dsc {
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid #fff;
        }

        #search {
          margin-bottom: 10px;
        }

        .fa-edit {
          font-size: 20px;
          cursor: pointer;
        }
    </style>
    <script src="../scripts/vue.min.js"></script>
</head>
<body>
    <div id="app3">
        aaabb
        <my-component :showname="showname" :data="data" :shownone="shownone"></my-component>
    </div>

    <!-- component template -->
    <script type="text/x-template" id="grid-template">
      <ul>
        <li v-for="item in test.items">
          {{item}}
        </li>
      </ul>
      <table>
        <thead>
          <tr>
            <th v-for="key in columns"
              @click="sortBy(key)"
              :class="{active: sortKey == key}">
              {{key | capitalize}}
              <span class="arrow"
                :class="sortOrders[key] > 0 ? 'asc' : 'dsc'" v-if="key != ''">
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="
            entry in data
            | filterBy filterKey
            | orderBy sortKey sortOrders[sortKey]">
            <td v-for="key in columns">
              <span v-if="key !='' && !entry.isEdit">{{entry[key]}}</span>
              <input type="text" name="{{key}}" v-model="entry[key + '2']" bounce="500" v-if="key !='' && entry.isEdit" />
              <button v-if="key == '' && entry.isEdit" @click="saveEntry(entry)">save</button>
              <i v-if="key =='' && !entry.isEdit" class="fa fa-edit" @click="editEntry(entry)"></i>
            </td>
          </tr>
        </tbody>
      </table>
    </script>

    <!-- demo root element -->
    <div id="demo">
      <form id="search">
        Search <input name="query" v-model="searchQuery">
      </form>
      <demo-grid 
        :test="test" 
        :data="gridData"
        :columns="gridColumns" 
        :filter-key="searchQuery">
      </demo-grid>

      
    </div>

    <script>
        // register the grid component
        Vue.component('demo-grid', {
          template: '#grid-template',
          props: {
            test: Object,
            data: Array,
            columns: Array,
            filterKey: String
          },
          data: function () {
            var sortOrders = {}
            this.columns.forEach(function (key) {
              sortOrders[key] = 1
            })
            return {
              sortKey: '',
              sortOrders: sortOrders
            }
          },
          methods: {
            sortBy: function (key) {
              if(key != '') {
                this.sortKey = key
                this.sortOrders[key] = this.sortOrders[key] * -1
              }
            },
            editEntry: function(entry) {
              entry.isEdit = !entry.isEdit;
              for(let i = 0; i < this.$data.columns.length; i++) {
                entry[this.$data.columns[i] + '2'] = entry[this.$data.columns[i]];
              }
            },
            saveEntry: function(entry) {
              entry.isEdit = !entry.isEdit;
              for(let i = 0; i < this.$data.columns.length; i++) {
                entry[this.$data.columns[i]] = entry[this.$data.columns[i] + '2'];
              }
            }
          }
        })

        // bootstrap the demo
        var demo = new Vue({
          el: '#demo',
          data: {
            searchQuery: '',
            test: {items: ['a', 'b', 'c']},
            gridColumns: ['','name', 'power', 'test'],
            gridData: [
              { name: 'Chuck Norris', power: Infinity, test: 'God', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Bruce Lee', power: 9000, test: 'Olhy', isEdit: false },
              { name: 'Jackie Chan', power: 7000, test: 'Finsh', isEdit: false },
              { name: 'Jet Li', power: 8000, test: 'Bloay', isEdit: false }
            ]
          }
        })

        var mycom2 = Vue.extend({
            template:'{{data.name}}<br/>{{data.age}}<br/>{{showname}}<br/>{{bname}}<br/>{{bdata.bchild}}',
            props:['showname','data','bname','bdata']
        });
        var bind_data = {
            bname:'外部绑定的名字在这里(来自mycom组件并且是外部定义的var，试试console里修改bind_data.bname=XXXX)',
            bdata:{
                bchild:'外部的child(来自mycom组件并且是外部定义的var，试试console里修改bind_data.bdata.bchild=XXXX)'
            }
        }
        var mycom = Vue.component('my-component',{
            template:'{{showname}}：<br/><my-component2 :data="data" :bname="bname" :bdata="bdata" showname="直接显示名字(来自直接传递)"></my-component2><br/>shownone:{{shownone}}',
            props:['showname','data'],
            components:{
                'my-component2':mycom2
            },
            data:function(){
                return bind_data;
            }
        });
        new Vue({
            el:'#app3',
            data:{
                'showname':'测试通信(来自vue)',
                'data':{
                    name:'名字(来自vue)',
                    age:'年龄(来自vue)'
                },
                'shownone':'这段显示不出来'
            }
        })
    </script>
</body>
</html>